<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>过程文档评审</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/teacher/open-report'}">开题报告评审</el-breadcrumb-item>
      <el-breadcrumb-item v-if="report.status === 2">审核开题报告</el-breadcrumb-item>
      <el-breadcrumb-item v-else>查看开题报告</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="card">
      <el-form  :model="report" label-width="120px"> 
        <el-form-item label="研究背景和意义">
          <el-input :value="report.basis" type="textarea" :rows="5" readonly></el-input>
        </el-form-item>
        <el-form-item label="发展现状和趋势">
          <el-input :value="report.trend" type="textarea" :rows="5" readonly></el-input>
        </el-form-item>
        <el-form-item label="研究内容">
          <el-input :value="report.content" type="textarea" :rows="5" readonly></el-input>
        </el-form-item>
        <el-form-item label="研究方案">
          <el-input :value="report.scheme" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="研究目标">
          <el-input :value="report.aim" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="参考文献">
          <el-input :value="report.reference" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="开题报告附件">
          <el-link type="primary" :underline="false" v-if="report.attachment" @click="filePreview(report.attachment)">{{report.filename}}</el-link>
          <el-link type="primary" :underline="false" v-else>无附件</el-link>
        </el-form-item>
      </el-form>
      <el-form ref="reviewFormRef" :rules="formRules" label-width="120px" :model="reviewParams" v-if="report.status === 2">
        <el-form-item label="审核结果" prop="status">
          <el-select v-model="reviewParams.status" placeholder="请选择审核结果"> 
            <el-option :value="3" label="审核不通过"></el-option>
            <el-option :value="4" label="审核通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见" prop="reviewAdvice">
          <el-input v-model="reviewParams.reviewAdvice" type="textarea" :rows="5"></el-input>
        </el-form-item> 
        <el-row>
          <el-button type="primary" style="margin-left: 45%; margin-top: 20px" @click="reviewReport('reviewFormRef')">提交审核</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {getReportById, reviewReportById} from '../../axios/report'

  export default {
    name: 'TeacherReportReview',
    data(){
      return {
        report: { 
        },
        baseUrl: 'http://view.xdocin.com/xdoc?_xdoc=',
        formRules: {
          status: [ { required: true, message: '请选择审核结果', trigger: 'change' } ],
          reviewAdvice: [ { required: true, message: '请输入审核意见', trigger: 'blur' } ]
        },
        reviewParams:{ 
          // id: 1,
          status: 4,
          reviewAdvice: ''
        }
      }
    },
    created () {
      this.getReport(this.$route.params.id)
    },
    methods:{
      filePreview(url){
        const a = document.createElement("a")
        a.setAttribute("target", "_blank")
        a.setAttribute("href",this.baseUrl + url)
        a.click()
      }, 
      getReport(id){
        // 发送后端请求
        getReportById(id).then(res => {
          if(res.success){
            this.report = res.data
          } 
        }) 
      },
      reviewReport(reviewFormRef){
        this.$refs[reviewFormRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => {
              // 此时发送后端请求，保存审核信息
              this.report.reviewAdvice = this.reviewParams.reviewAdvice
              this.report.status = this.reviewParams.status
              reviewReportById(this.report).then(res => {
                if(res.success){
                  this.$message.success('审核提交成功!')
                  this.$router.push({ path: '/teacher/open-report' })
                } 
              }) 
            }).catch(() => {
              this.$message.info('已取消提交!')
            })
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        }) 
      } 
    }
  }
</script>

<style scoped>
  .card{
    margin: 0 10px
  }
  .el-form-item {
    width: 90%;
  } 
</style>